<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改异常区库存管理')"/>
    <style>
        [v-cloak] {
            display: none;
        }
        .carrierInput {
            width: 100%;
            height: 34px;
            border: 1px solid #e5e6e7;
            padding: 6px 12px;
        }
        .carrierInput:focus {
            outline: none;
            border: 1px solid #1bb394;
        }
        .ul_ {
            position: absolute;
            right: 12px;
            width: calc(calc(100% - 27px));
            height: 200px;
            z-index: 999999;
            background-color: #fff;
            overflow: auto;
            border: 1px solid #dddddd;
        }
        .ul_ li {
            cursor: pointer;
            width: 100%;
            text-indent: 12px;
            font-size: 14px;
        }
        .ul_ li:hover {
            background: #1e90ff;
            color: #ffffff;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-boxItemExceptionSingle-edit" v-if="unitState">
        <div class="form-group">
            <label class="col-sm-3 control-label">单晶编号：</label>
            <div class="col-sm-8">
                <input id="materialId" name="materialId" class="form-control" v-model="msg.materialId" readonly="true">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">托盘号：</label>
            <div class="col-sm-8" style="position: relative">
                <input type="text" class="carrierInput" v-model="inputCarrierName" @focus="focusCarrier()" @blur="carrierInputYZ()"/>
                <ul id="ul_carrier" class="ul_" v-show="showCarrierUl">
                    <li v-for="(item, index) in carrierList" :key="index" @click="chooseCarrier(item.carrierId)" v-cloak>{{item.carrierId}}</li>
                </ul>
                <input id="carrierId" name="carrierId" type="hidden" v-model="msg.carrierId">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">检测结果：</label>
            <div class="col-sm-8">
                <select name="result" class="form-control" v-model="msg.result">
                    <option value="0">OK</option>
                    <option value="1">NG</option>
                    <option value="3">灰度异常</option>
                    <option value="4">长度异常</option>
                    <option value="5">宽度异常</option>
                    <option value="6">位置异常</option>
                </select>
            </div>
        </div>
    </form>
    <form class="form-horizontal m" id="form-boxItemExceptionMulti-edit" v-if="!unitState">
        <input id="ids" name="ids" v-model="materialId" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">检测结果：</label>
            <div class="col-sm-8">
                <select name="result" class="form-control">
                    <option value="0">OK</option>
                    <option value="1">NG</option>
                    <option value="3">灰度异常</option>
                    <option value="4">长度异常</option>
                    <option value="5">宽度异常</option>
                    <option value="6">位置异常</option>
                </select>
            </div>
        </div>
    </form>
</div>
<div th:include="include::footer"></div>
<script type="text/javascript">
    var prefix = ctx + "boxItemException";

    var materialId = localStorage.getItem(prefix+'/editPage');

    function submitHandler(){
        if(app.unitState){
            if(app.msg.carrierId == ''){
                $.modal.alertError("请选择托盘号！！");
                return;
            }else{
                if($.validate.form()){
                    $.operate.save(prefix + "/updateBoxItemException", $('#form-boxItemExceptionSingle-edit').serialize());
                }
            }
        }else{
            $.operate.save(prefix + "/editall", $('#form-boxItemExceptionMulti-edit').serialize());
        }
    }

    var app = new Vue({
        el: '.wrapper',
        data: {
            msg: {},
            carriers: [],
            inputCarrierName: '',
            showCarrierUl: false,
            carrierList: [],
            unitState: true,
            materialId: materialId
        },
        methods: {
            //函数防抖
            carrier_debounce(wait){
                clearTimeout(this.timer);
                this.timer = setTimeout(() => {
                    this.getSelectCarrierData(this.inputCarrierName.trim());
                }, wait)
            },
            //已选托盘号
            chooseCarrier(id){
                this.inputCarrierName = id;
                this.msg.carrierId = id;
            },
            //重置输入托盘号
            carrierReset(){
                this.inputCarrierName = '';
                this.msg.carrierId = '';
            },
            //验证输入托盘号
            carrierInputYZ(){
                if(this.inputCarrierName.trim() != ''){
                    var arr = [];
                    for(var i = 0; i < this.carriers.length; i++){
                        arr.push(this.carriers[i].carrierId);
                    }
                    var index = $.inArray(this.inputCarrierName.trim(), arr);
                    if(index < 0){
                        $.modal.alertError("不存在该托盘号");
                        this.carrierReset();
                    }
                }else{
                    this.carrierReset();
                }
            },
            //托盘号输入框聚焦
            focusCarrier(){
                if(document.getElementsByClassName('carrierInput')[0] == document.activeElement){
                    this.showCarrierUl = true;
                    this.carrier_debounce(500);
                }
            },
            //根据托盘号输入框内容匹配托盘号列表
            getSelectCarrierData(val){
                this.carrierList = [];
                for(var i = 0; i < this.carriers.length; i++){
                    if(this.carriers[i].carrierId.indexOf(val) != -1){
                        this.carrierList.push(this.carriers[i]);
                    }
                }
            },
            //获取要修改的原始内容
            getMsg(){
                var that = this;
                $.ajax({
                    url: prefix + "/findList",
                    type: "POST",
                    data: {
                        materialId: materialId
                    },
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.msg = data.rows[0];
                        if(that.msg.carrierId == null){
                            that.inputCarrierName = '';
                        }else{
                            that.inputCarrierName = that.msg.carrierId;
                        }
                    }
                })
            },
            //获取托盘号列表
            getListForPullDown(){
                var that = this;
                $.ajax({
                    url: "/in/MaterialInfo/findListForPullDown",
                    type: "GET",
                    data: {},
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.carriers = data.data;
                    }
                })
            },
            //判断批量修改还是单个修改
            judge(){
                var arr = materialId.split(',');
                if(arr.length == 1){
                    this.unitState = true;
                    this.getListForPullDown();
                    this.getMsg();
                }else{
                    this.unitState = false;
                }
            }
        },
        created(){
            this.judge();
        },
        watch: {
            'inputCarrierName': {
                handler: function(){
                    this.focusCarrier();
                }
            }
        },
        mounted(){
            let that = this;
            document.addEventListener('click', function(e){
                if(e.target.className != 'carrierInput'){
                    that.$nextTick(() => {
                        that.showCarrierUl = false;
                    })
                }
            })
            if(this.unitState){
                document.getElementById('ul_carrier').onmousedown = function(e){
                    if(e && e.preventDefault){
                        e.preventDefault();
                    }else{
                        window.event.returnValue = false;
                    }
                    return false;
                }
            }
        }
    })
</script>
</body>
</html>
